
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index_style.css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-beta.2/echarts.min.js"></script>
</head>
<body>

<!-- 页面头部区域 -->
<div id="head_content">
    <div class="head_logo">
        <img src="img/baidu_logo.png" height="25"/>
    </div>
    <div class="sub_title">
        新型冠状病毒肺炎
    </div>
    <div class="title">
        <h1>疫情实时大数据报告</h1>
    </div>
    <div class="readnum">
        共 8,173,099,278 人次已浏览
    </div>
</div>

<!-- 页面主体区域 -->
<div id="body_content">
    <!-- lab页 -->
    <div id="yiqing_lab">
        <div id="yiqing_in">
            <span  class="active">国内疫情</span>
        </div>
        <div id="yinqing_out">
            <span>国外疫情</span>
        </div>
    </div>

    <!-- 国内疫情数据展示 -->
    <div id="yiqing_data_block">
        <div class="title">
            <h4>国内疫情</h4>
            <span>数据更新至 2020.11.26 14:26</span>
        </div>
        <div id="box" class="content">
            <div class="info_block">
                <span class="lab">登记人数</span>
                <span class="current_num">{{ registeredNum }}</span>
                <span class="yestoday_num">昨日<span class="data">+{{ registeredNumadd }}</span></span>
            </div>
            <div class="info_block">
                <span class="lab">累计确诊</span>
                <span class="current_num">{{ leijiquezhen }}</span>
                <span class="yestoday_num">昨日<span class="data">+{{ leijiquezhenadd }}</span></span>
            </div>
            <div class="info_block">
                <span class="lab">无症状</span>
                <span class="current_num">{{AsymptomaticNum}}</span>
                <span class="yestoday_num">昨日<span class="data">+{{AsymptomaticNumadd}}</span></span>
            </div>
            <div class="info_block">
                <span class="lab">有症状</span>
                <span class="current_num">{{SymptomaticNum}}</span>
                <span class="yestoday_num">昨日<span class="data">+{{SymptomaticNumadd}}</span></span>
            </div>
            <div class="info_block">
                <span class="lab">疑似病例</span>
                <span class="current_num">{{Suspected}}</span>
                <span class="yestoday_num">昨日<span class="data">+{{Suspectedadd}}</span></span>
            </div>
            <div class="info_block">
                <span class="lab">已治愈</span>
                <span class="current_num">{{Cure}}</span>
                <span class="yestoday_num">昨日<span class="data">+{{Cureadd}}</span></span>
            </div>
            <div class="info_block">
                <span class="lab">重症病例</span>
                <span class="current_num">{{Serious}}</span>
                <span class="yestoday_num">昨日<span class="data">+{{Seriousadd}}</span></span>
            </div>
            <div class="info_block">
                <span class="lab">死亡病例</span>
                <span class="current_num">{{Death}}</span>
                <span class="yestoday_num">昨日<span class="data">+{{Deathadd}}</span></span>
            </div>
        </div>
    </div>

    <!-- 地图区域 -->
    <div id="map_block">
        <!-- lab切换区 -->
        <div class="title">
            <div id="lab_left" class="lab_left active">
                现有确诊
            </div>
            <div id="lab_right" class="lab_right">
                累计确诊
            </div>
        </div>
        <!-- 地图区域 -->
        <div id="main" class="content">

        </div>
        <script type="text/javascript">
            /*数据变量*/
            var resultData = [];
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath}/getmapData",
                success: function(msg){
                    resultData =msg;

                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));

                    myChart.showLoading();

                    $.get("json/full.json", function (geoJson) {
                        myChart.hideLoading();
                        echarts.registerMap('HK', geoJson);
                        myChart.setOption(option = {

                            tooltip: {
                                trigger: 'item',
                                formatter: '{b}<br/>{c} (人)'
                            },
                            toolbox: {
                                show: true,
                                orient: 'vertical',
                                left: 'right',
                                top: 'center',
                                feature: {
                                    dataView: {readOnly: false},
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            visualMap: {
                                min: 800,
                                max: 50000,
                                text: ['High', 'Low'],
                                realtime: false,
                                calculable: true,
                                inRange: {
                                    color: ['lightskyblue', 'yellow', 'orangered']
                                }
                            },
                            series: [
                                {
                                    name: '香港18区人口密度',
                                    type: 'map',
                                    mapType: 'HK', // 自定义扩展图表类型
                                    label: {
                                        show: true
                                    },
                                    data: resultData
                                }
                            ]
                        });
                    });
                }
            });
        </script>
    </div>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    /* VUE部分 */
    var app = new Vue({
        el:"#box",
        data:{
            leijiquezhen:15,
            registeredNum:10,
            SymptomaticNum:5,
            AsymptomaticNum:5,
            Suspected:5,
            Cure:5,
            Serious:5,
            Death:5,
            /*----增加----*/
            leijiquezhenadd:15,
            registeredNumadd:10,
            SymptomaticNumadd:5,
            AsymptomaticNumadd:5,
            Suspectedadd:5,
            Cureadd:5,
            Seriousadd:5,
            Deathadd:5
        },
        mounted:function () {/*在页面加载完成之后立马执行的函数*/
            /*1 获取累计确诊人数，传递到leijiquezheng属性中就可以了*/
            var that = this;
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath}/getConfirmedNum",
                success: function(msg){
                    /*alert( "Data Saved: " + msg );*/
                    that.leijiquezhen = msg;
                }
            });
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath}/getRegisteredNum",
                success: function(msg){
                    /*alert( "Data Saved: " + msg );*/
                    that.registeredNum = msg;
                }
            });
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath}/getSymptomaticNum",//有症状
                success: function(msg){
                    /*alert( "Data Saved: " + msg );*/
                    that.SymptomaticNum = msg;
                }
            });
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath}/getAsymptomaticNum",//无症状
                success: function(msg){
                    /*alert( "Data Saved: " + msg );*/
                    that.AsymptomaticNum = msg;
                }
            });
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath}/getSuspectedNum",//疑似
                success: function(msg){
                    /*alert( "Data Saved: " + msg );*/
                    that.Suspected = msg;
                }
            });
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath}/getCureNum",//疑似
                success: function(msg){
                    /*alert( "Data Saved: " + msg );*/
                    that.Cure = msg;
                }
            });
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath}/getSeriousNum",//疑似
                success: function(msg){
                    /*alert( "Data Saved: " + msg );*/
                    that.Serious = msg;
                }
            });
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath}/getDeathNum",//疑似
                success: function(msg){
                    /*alert( "Data Saved: " + msg );*/
                    that.Death = msg;
                }
            });
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath}/getConfirmedNumadd",
                success: function(msg){
                    /*alert( "Data Saved: " + msg );*/
                    that.leijiquezhenadd = msg;
                }
            });
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath}/getRegisteredNumadd",
                success: function(msg){
                    /*alert( "Data Saved: " + msg );*/
                    that.registeredNumadd = msg;
                }
            });
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath}/getSymptomaticNumadd",//有症状
                success: function(msg){
                    /*alert( "Data Saved: " + msg );*/
                    that.SymptomaticNumadd = msg;
                }
            });
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath}/getAsymptomaticNumadd",//无症状
                success: function(msg){
                    /*alert( "Data Saved: " + msg );*/
                    that.AsymptomaticNumadd = msg;
                }
            });
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath}/getSuspectedNumadd",//疑似
                success: function(msg){
                    /*alert( "Data Saved: " + msg );*/
                    that.Suspectedadd = msg;
                }
            });
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath}/getCureNumadd",//疑似
                success: function(msg){
                    /*alert( "Data Saved: " + msg );*/
                    that.Cureadd = msg;
                }
            });
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath}/getSeriousNumadd",//疑似
                success: function(msg){
                    /*alert( "Data Saved: " + msg );*/
                    that.Seriousadd = msg;
                }
            });
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath}/getDeathNumadd",//疑似
                success: function(msg){
                    /*alert( "Data Saved: " + msg );*/
                    that.Deathadd = msg;
                }
            });
        }
    });
</script>
<script type="text/javascript" src="js/index_js.js"></script>
</body>
</html>

